﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
    <link href="../../Scripts/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD64Iw9P3MVFJp3axl6NKJ-BucBROh_zrY&sensor=false"></script>
	<script src="../../Scripts/extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/ext-all.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/Plugin/Ext.ux.GMapPanel3.js" type="text/javascript"></script>

    <script src="../../Scripts/map.js" type="text/javascript"></script>
  
<script type="text/javascript"> 

	var eastPanelHidden = false;
	var westPanelHidden = false;
	var westPanelBtn;
	var eastPanelBtn;
	var eastPanel;
	var westPanel;
	var containerPanel;
	var viewport;
	var tab1;
	var tab2;
	var detail2;
	var invDetailPanel;
	var mainTabPanel;
	var detailsPanel;
	var centerPanel;
   var win;
var action1 = new Ext.Action({
    text: 'Hệ thống',
    handler: function(){
        //Ext.Msg.alert('Click','You clicked on "Action 1".');
		if(!win){
			win = new Ext.Window({
					layout:'fit',
					width:500,
					height:300,
					closeAction:'hide',
					plain: true,
					title:'Config ne cha',
					buttons: [{
						text:'Submit',
						disabled:true
					},{
						text: 'Close',
						handler: function(){
							win.hide();
						}
					}]
				});
		}
		win.show();
    }
});
var action2 = new Ext.Action({
    text: 'Cái beep gì đây',
    handler: function(){
        Ext.Msg.alert('Click','You clicked on "Action 2".');
    }
});
var action3 = new Ext.Action({
    text: 'Action 3',
    handler: function(){
        Ext.Msg.alert('Click','You clicked on "Action 3".');
    }
});
var action4 = new Ext.Action({
    text: 'Action 4',
    handler: function(){
        Ext.Msg.alert('Click','You clicked on "Action 4".');
    }
});


var mainTBar = new Ext.Toolbar({
    items:[action1,
    {                   
        text: 'Menu 1',
        menu: [action2,action3,action4]          
    }]
})   

function toggleEastPanel() {     
     if (eastPanel) {        
       if (eastPanelHidden == false) {
            eastPanel.hide(); 
            eastPanel.ownerCt.doLayout();         
       } else {
            eastPanel.show();
            eastPanel.ownerCt.doLayout();
            eastPanel.expand();     
       }
       eastPanelHidden = !eastPanelHidden;
     }     
}
function toggleWestPanel() {  
     if (westPanel) {   
       if (westPanelHidden == false) {
            westPanel.hide(); 
            westPanel.ownerCt.doLayout();         
       } else {
            westPanel.show();
            westPanel.ownerCt.doLayout();
            westPanel.expand();            
       }
       westPanelHidden = !westPanelHidden;       
     }     
}


function onTabChange(tabPanel, tab) {
    switch (tab.id) {
        case 'tab-1':
            detail2.hide();
            invDetailPanel.show();
            break;
        case 'tab-2':
            invDetailPanel.hide();
            detail2.show();
            break;
    }
}

Ext.onReady(function(){	
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	

 var map1 = new Ext.ux.GMapPanel({
            xtype: 'gmappanel',
            gmapType: 'map',
            zoomLevel: 14,
            setCenter: {
                lat: 40.782686,
                lng: -73.96524,
                marker: {
                    title: 'Central Park'
                }
            }
        });
		map = new Ext.ux.GMapPanel({
            id: 'panelmap',
            region: 'center',
            zoomLevel: 14,
            gmapType: 'map',
            border: true,
			setCenter : {
    			lat : 10.788202,
    			lng : 106.703228
				
    		},
            listeners: {
                resize: function() {
                   // panorama.onResize();
                }
            }
        });
    
    
    mainTabPanel = new Ext.Panel({
        region: 'center',
        margins: '0 0 0 0',
		ayout: 'border',
		header: false,
		items:[map],
		listeners: {
			resize : function(){
				map.checkResize();
			}
		}
        
    });   
   
    invDetailPanel = new Ext.Panel({
        contentEl:'pnl-detail1',
        autoScroll:true,
        border:false
    }); 
    
    detail2 = new Ext.Panel({
        contentEl:'pnl-detail2',
        autoScroll:true,
        border:false
    }) 
    
    detailsPanel = new Ext.Panel({
        region: 'south',
        height:300,
        margins: '0 0 0 0',
        cmargins: '5 0 0 0',
        title: 'Details',
        split: true,
        layout:'fit',
        collapsible: true,
        items:[invDetailPanel,detail2]
    }); 
    
    

    westPanel = new Ext.FormPanel({
        region: 'west',
        border:true,
        title: 'Bảng điều khiển',
        margins: '0 0 0 0', 
        cmargins: '0 5 0 0',
        bodyStyle:'padding:5px 5px 5px 5px',
        autoScroll:true,
        labelWidth:100,
        collapsible:true,
        split:true,
        width:340,
        minSize: 140,
        maxSize: 400,
        items:[
          
        ]
    }); 
    
    centerPanel = new Ext.Panel({
        margins: '0 0 0 0', 
        region:'center',
        layout:'border',
        border:false,
        items:[map, detailsPanel]
    });
    
    eastPanel = new Ext.Panel({
        id:'eastPanel',
        title:'East Panel',
        contentEl:'pnl-detail3',
        collapsible:true,
        split:true,
        margins: '40 0 0 0', 
        cmargins: '40 0 0 5', 
        region:'east',
        layout:'fit',
        width:500,
        minSize: 100   
    });

    containerPanel = {
        header: false,
        title: 'Menu', 
        tbar: mainTBar,
        border:false,
        layout:'border',
        items:[
                westPanel,
                centerPanel
        ]
    }  

    

    viewport = new Ext.Viewport({
        layout:'fit',        
        items:[ 
                containerPanel
        ]       
    });
    
    
});

    </script>

</head>
<body>
    <div id="pnl-tab1">Tab 1</div>
    <div id="pnl-tab2">Tab 2</div>
    <div id="pnl-detail1">Detail 1</div>
    <div id="pnl-detail2">Detail 2</div>
    <div id="pnl-detail3">Detail 3</div>
	<div id="map-canvas"></div>
</body>
</html>
